<template>
    <div class="result" ref="Bs1">
    <el-table :data="MusicList" style="width: 100%">
    <el-table-column label="歌曲名" align="center">
      <template #default="scope">
        <div class="myplay"> 
            <el-icon size="20" color="blue" @click="toplay(scope.row)"><VideoPlay /></el-icon>
            <span @click="tocomment(scope.row)">{{ scope.row.name }}</span>
            <el-icon size="20" color="red" @click="toplaymv(scope.row)"><Film /></el-icon>     
        </div>
      </template>
    </el-table-column>
    <el-table-column label="作者" width="360" align="center">
      <template #default="scope">
        <div>
          <span style="margin-left: 10px">{{ getSinger(scope.row.artists) }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="专辑" width="310" align="center">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.album.name }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.album.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="播放时长" width="210" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content: center;">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ getTime(scope.row.duration) }}</span>
        </div>
      </template>
    </el-table-column>
    
  </el-table>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { nextTick, onMounted } from "@vue/runtime-core";
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from "vue-router";
import {getMusicList} from '@/http/music'
import router from "@/router";
import BScroll from '@better-scroll/core';
let Bs1 = ref<any>(null);
const Route = useRoute();
//存放歌曲列表
let MusicList = ref();
onMounted(async ()=>{
    getMusic();
    console.log(Bs1.value);
    await nextTick();
    const Bs = new BScroll(Bs1.value,{
        scrollbar: true,
        scrollY:true,
        click:true,
    })

      
});
onBeforeRouteUpdate( async (to,from,next)=>{
    console.log(to);
    let res = await getMusicList(`${to.params.keyword}`);
    MusicList.value = await res.data.result.songs;
    // nextTick(()=>{
    //     scroll1.value.refresh();
    // })
    Bs1.value.refresh();
    next();
})
//发起网络请求，获取歌曲
const getMusic = async()=>{
    let res = await getMusicList(`${Route.params.keyword}`);
    MusicList.value = await res.data.result.songs
    console.log(res);  
}
//处理歌手名称
const getSinger = (arr:any[])=>{
    let allSinger = '';
    if(arr.length<=1){
        allSinger = arr[0].name;
        return allSinger
    }else{
        arr.forEach((item)=>{
            allSinger+=item.name
            allSinger += '|'
        });
        return allSinger.slice(0,-1)
    }
}
//处理时间
const getTime = (time:number)=>{
    let fulltime=''
    let minues = Math.floor(time/1000/60);
    let seconds = Math.ceil(time/1000%60);
    fulltime = seconds<10? minues+'分'+ '0'+seconds+'秒': minues+'分'+seconds+'秒';
    return fulltime;
}
//跳转路由，并播放音乐
const toplay = (obj:any)=>{
    console.log('传过来的数据是',obj);
    router.push({
        path:'/playmusic',
        query:{
           id:obj.id,
           name:obj.name,
           singer:obj.artists[0].name,
           aid:obj.album.id
        }
    })  
}
//跳转路由播放mv
const toplaymv = (obj:any)=>{
    router.push({
        path:'/playMv',
        query:{
            mvid:obj.mvid,
            name:obj.name
        }
    })
}
//跳转路由，获取评论
const tocomment = (obj:any)=>{
    router.push({
        path:'/comment',
        query:{
            id:obj.id
        }
    })
}
</script>

<style scoped lang="scss">
.result {
    margin: 0 auto;
    width: 80%;
    height: 584px;
    overflow: hidden;
}
.myplay {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>